import './ImageProgress.scss'
import dayjs from 'dayjs'
import { DatePicker } from 'antd'
import { useMount, useRequest, useSize } from 'ahooks'
import { useRef, useState } from 'react'
import { BarConfigA01Template } from '../../Assets/Template/AssetsCharts'
import { Http } from '../../../../Common/Api'
import { useEffect } from 'react'
import { useCallback } from 'react'

const style = {
    ColumnColor:
        'l(180) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(180) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(180) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
}

const insertNewlineEveryFourChars = str => {
    return str.replace(/(.{4})/g, '$1\n')
}

export const ImageProgressA01 = ({ org }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const ActiveList = ['总体', '本年', '本月']
    const [Active, setActive] = useState(0)
    const [Date, setDate] = useState(dayjs())
    const [Data, setData] = useState([])

    const onActive = e => {
        setActive(e)
    }

    const { runAsync: getAll } = useRequest(Http, { manual: true })
    const { runAsync: getYear } = useRequest(Http, { manual: true })
    const { runAsync: getMonth } = useRequest(Http, { manual: true })

    const getData = () => {
        if (Active === 0) {
            getAll({
                url: 'getGetEngineeringPerByYear',
                data: { organizationUuid: org || '', StatDate: dayjs(Date).format('YYYY') },
            }).then(res => {
                const data = res.list
                    .map(({ tableName, formerYearPer, thisYearPer }) => {
                        const type = insertNewlineEveryFourChars(tableName)
                        return [
                            { name: '往年完成', type, value: formerYearPer },
                            { name: '本年完成', type, value: thisYearPer },
                        ]
                    })
                    .flatMap(item => item)
                    .filter(item => item !== false)
                setData(data)
            })
        }
        if (Active === 1) {
            getYear({
                url: 'getGetEngineeringPerByYearMonth',
                data: { organizationUuid: org || '', StatDate: dayjs(Date).format('YYYY-MM') },
            }).then(res => {
                const data = res.list
                    .map(({ tableName, formerMonthPer, thisMonthPer }) => {
                        const type = insertNewlineEveryFourChars(tableName)
                        return [
                            { name: '往月完成', type, value: formerMonthPer },
                            { name: '本月完成', type, value: thisMonthPer },
                        ]
                    })
                    .flatMap(item => item)
                    .filter(item => item !== false)
                setData(data)
            })
        }
        if (Active === 2) {
            getMonth({
                url: 'getGetEngineeringPerByYearMonthDay',
                data: { organizationUuid: org || '', StatDate: dayjs(Date).format('YYYY-MM-DD') },
            }).then(res => {
                const data = res.list
                    .map(({ tableName, formerDayPer, thisDayPer }) => {
                        const type = insertNewlineEveryFourChars(tableName)
                        return [
                            { name: '往月完成', type, value: formerDayPer },
                            { name: '本月完成', type, value: thisDayPer },
                        ]
                    })
                    .flatMap(item => item)
                    .filter(item => item !== false)
                setData(data)
            })
        }
    }

    useMount(getData)

    useEffect(() => {
        getData()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [Active, Date])

    return (
        <div className="ImageProgressA01">
            <div className="Nav">
                {ActiveList.map((item, index) => (
                    <div key={index} onClick={() => onActive(index)} className={Active === index ? 'active' : ''}>
                        {item}
                    </div>
                ))}
            </div>
            <div className="Search">
                <DatePicker
                    allowClear={false}
                    suffixIcon={null}
                    value={Date}
                    onChange={e => setDate(e)}
                    picker={Active === 0 ? 'year' : Active === 1 ? 'month' : ''}
                />
            </div>
            <div className="Charts" ref={ChartsBox}>
                {size && Data && <BarConfigA01Template size={size} data={Data} style={style} />}
            </div>
        </div>
    )
}
